/*!
 * Copyright (c) 2014-2023 Bjoern Kimminich & the OWASP Juice Shop contributors.
 * SPDX-License-Identifier: MIT
 */
@use '@angular/material' as mat;

@import 'theme';

@mixin link-theme($theme) {
  a:link,
  a:visited {
    color: mat.get-color-from-palette(map-get($theme, accent), lighter);
    text-decoration: none;
  }

  a:hover,
  a:focus,
  a:active {
    text-decoration: underline;
  }

  a {
    outline: none;
  }
}

@mixin deluxe-membership-theme($theme) {
  .deluxe-membership {
    background: linear-gradient(90deg, mat.get-color-from-palette(map-get($theme, primary), 1) 0%, mat.get-color-from-palette(map-get($theme, background), card) 100%);
  }
}

@mixin notification-theme($theme) {
  .confirmation {
    color: mat.get-color-from-palette(map-get($theme, accent));
  }

  .ribbon::before {
    border: 5px solid mat.get-color-from-palette(map-get($theme, accent));
  }

  .ribbon span {
    background-color: mat.get-color-from-palette(map-get($theme, accent));
  }

  .error {
    color: mat.get-color-from-palette(map-get($theme, warn));
  }

  .ribbon-sold::before {
    border: 5px solid mat.get-color-from-palette(map-get($theme, warn));
  }

  .ribbon-sold span {
    background-color: mat.get-color-from-palette(map-get($theme, warn));
  }

  .primary-notification {
    background-color: mat.get-color-from-palette(map-get($theme, primary), darker);
  }

  .accent-notification {
    background-color: mat.get-color-from-palette(map-get($theme, accent), darker);
  }

  .warn-notification {
    background-color: mat.get-color-from-palette(map-get($theme, warn), darker);
  }
}

@mixin image-thumbnail-theme($theme) {
  .img-thumbnail {
    background-color: mat.get-color-from-palette(map-get($theme, primary), 0.05);
    border: 1px solid mat.get-color-from-palette(map-get($theme, primary));
    border-radius: 3px;
    padding: 3px;
  }
}

@mixin score-star-theme($theme) {
  .empty-star {
    stop-color: mat.get-color-from-palette(map-get($theme, primary));
  }

  .filled-star {
    stop-color: mat.get-color-from-palette(map-get($theme, accent));
  }

  .star-border {
    stroke: mat.get-color-from-palette(map-get($theme, accent));
  }
}

// sets css variables to be used across components during runtime
@mixin css-vars($theme) {
  --theme-primary: #{mat.get-color-from-palette(map-get($theme, primary))};
  --theme-primary-lighter: #{lighten(mat.get-color-from-palette(map-get($theme, primary)), 6%)};
  --theme-primary-light: #{lighten(mat.get-color-from-palette(map-get($theme, primary)), 10%)};
  --theme-primary-darker: #{darken(mat.get-color-from-palette(map-get($theme, primary)), 6%)};
  --theme-primary-dark: #{darken(mat.get-color-from-palette(map-get($theme, primary)), 10%)};
  --theme-primary-fade-10: #{fade-out(mat.get-color-from-palette(map-get($theme, primary)), 0.1)};
  --theme-primary-fade-20: #{fade-out(mat.get-color-from-palette(map-get($theme, primary)), 0.2)};
  --theme-primary-fade-30: #{fade-out(mat.get-color-from-palette(map-get($theme, primary)), 0.3)};
  --theme-primary-fade-40: #{fade-out(mat.get-color-from-palette(map-get($theme, primary)), 0.4)};
  --theme-primary-fade-50: #{fade-out(mat.get-color-from-palette(map-get($theme, primary)), 0.5)};

  --theme-accent: #{mat.get-color-from-palette(map-get($theme, accent))};
  --theme-accent-lighter: #{lighten(mat.get-color-from-palette(map-get($theme, accent)), 6%)};
  --theme-accent-light: #{lighten(mat.get-color-from-palette(map-get($theme, accent)), 10%)};
  --theme-accent-darker: #{darken(mat.get-color-from-palette(map-get($theme, accent)), 6%)};
  --theme-accent-dark: #{darken(mat.get-color-from-palette(map-get($theme, accent)), 10%)};
  --theme-accent-fade-10: #{fade-out(mat.get-color-from-palette(map-get($theme, accent)), 0.1)};
  --theme-accent-fade-20: #{fade-out(mat.get-color-from-palette(map-get($theme, accent)), 0.2)};
  --theme-accent-fade-30: #{fade-out(mat.get-color-from-palette(map-get($theme, accent)), 0.3)};
  --theme-accent-fade-40: #{fade-out(mat.get-color-from-palette(map-get($theme, accent)), 0.4)};
  --theme-accent-fade-50: #{fade-out(mat.get-color-from-palette(map-get($theme, accent)), 0.5)};

  --theme-warn: #{mat.get-color-from-palette(map-get($theme, warn))};
  --theme-warn-lighter: #{lighten(mat.get-color-from-palette(map-get($theme, warn)), 6%)};
  --theme-warn-light: #{lighten(mat.get-color-from-palette(map-get($theme, warn)), 10%)};
  --theme-warn-darker: #{darken(mat.get-color-from-palette(map-get($theme, warn)), 6%)};
  --theme-warn-dark: #{darken(mat.get-color-from-palette(map-get($theme, warn)), 10%)};
  --theme-warn-fade-10: #{fade-out(mat.get-color-from-palette(map-get($theme, warn)), 0.1)};
  --theme-warn-fade-20: #{fade-out(mat.get-color-from-palette(map-get($theme, warn)), 0.2)};
  --theme-warn-fade-30: #{fade-out(mat.get-color-from-palette(map-get($theme, warn)), 0.3)};
  --theme-warn-fade-40: #{fade-out(mat.get-color-from-palette(map-get($theme, warn)), 0.4)};
  --theme-warn-fade-50: #{fade-out(mat.get-color-from-palette(map-get($theme, warn)), 0.5)};

  --theme-text: #{mat.get-color-from-palette(map-get($theme, foreground), text)};
  --theme-text-lighter: #{lighten(mat.get-color-from-palette(map-get($theme, foreground), text,), 6%)};
  --theme-text-light: #{lighten(mat.get-color-from-palette(map-get($theme, foreground), text,), 10%)};
  --theme-text-darker: #{darken(mat.get-color-from-palette(map-get($theme, foreground), text,), 10%)};
  --theme-text-dark: #{darken(mat.get-color-from-palette(map-get($theme, foreground), text,), 25%)};
  --theme-text-fade-10: #{fade-out(mat.get-color-from-palette(map-get($theme, foreground), text,), 0.1)};
  --theme-text-fade-20: #{fade-out(mat.get-color-from-palette(map-get($theme, foreground), text,), 0.2)};
  --theme-text-fade-30: #{fade-out(mat.get-color-from-palette(map-get($theme, foreground), text,), 0.3)};
  --theme-text-fade-40: #{fade-out(mat.get-color-from-palette(map-get($theme, foreground), text,), 0.4)};
  --theme-text-fade-50: #{fade-out(mat.get-color-from-palette(map-get($theme, foreground), text,), 0.5)};
  
  --theme-text-invert-15: #{invert(mat.get-color-from-palette(map-get($theme, foreground), text,), 15%)};
  --theme-text-invert-30: #{invert(mat.get-color-from-palette(map-get($theme, foreground), text,), 30%)};
  
  --theme-background: #{mat.get-color-from-palette(map-get($theme, background), card)};
  --theme-background-lighter: #{lighten(mat.get-color-from-palette(map-get($theme, background), card), 6%)};
  --theme-background-light: #{lighten(mat.get-color-from-palette(map-get($theme, background), card), 10%)};
  --theme-background-darker: #{darken(mat.get-color-from-palette(map-get($theme, background), card), 6%)};
  --theme-background-dark: #{darken(mat.get-color-from-palette(map-get($theme, background), card), 10%)};
  --theme-background-darkest: #{darken(mat.get-color-from-palette(map-get($theme, background), card), 14%)};
}

@mixin snackbar($theme) {
  .mat-snack-bar-container {
    background-color: mat.get-color-from-palette(map-get($theme, background), card) !important;
    color: mat.get-color-from-palette(map-get($theme, foreground), text) !important;
  }

  .mat-snack-bar-container.errorBar {
    color: mat.get-color-from-palette(map-get($theme, warn)) !important;
  }

  .mat-snack-bar-container.confirmBar {
    color: mat.get-color-from-palette(map-get($theme, accent)) !important;
  }
}

@mixin google-button($theme) {
  .google-button {
    background-color: mat.get-color-from-palette(map-get($theme, accent), darker) !important;
  }
}

@mixin overlay-theme($theme) {
  .overlay {
    background: mat.get-color-from-palette(map-get($theme, primary), darker, 0.7);
  }
}

@mixin custom-components-theme($theme) {
  @include link-theme($theme);
  @include notification-theme($theme);
  @include image-thumbnail-theme($theme);
  @include score-star-theme($theme);
  @include snackbar($theme);
  @include google-button($theme);
  @include deluxe-membership-theme($theme);
  @include overlay-theme($theme);
}

$bg-hacking-instructor: rgba(0, 0, 0, 0.3);

.deeppurple-amber-theme {
  @include mat.all-component-themes($deeppurple-amber-theme);
  @include custom-components-theme($deeppurple-amber-theme);
  @include css-vars($deeppurple-amber-theme);
}

.indigo-pink-theme {
  @include mat.all-component-themes($indigo-pink-theme);
  @include custom-components-theme($indigo-pink-theme);
  @include css-vars($indigo-pink-theme);
}

.pink-bluegrey-theme {
  @include mat.all-component-themes($pink-bluegrey-theme);
  @include custom-components-theme($pink-bluegrey-theme);
  @include css-vars($pink-bluegrey-theme);
}

.purple-green-theme {
  @include mat.all-component-themes($purple-green-theme);
  @include custom-components-theme($purple-green-theme);
  @include css-vars($purple-green-theme);
}

.bluegrey-lightgreen-theme {
  @include mat.all-component-themes($bluegrey-lightgreen-theme);
  @include custom-components-theme($bluegrey-lightgreen-theme);
  @include css-vars($bluegrey-lightgreen-theme);
}

.blue-lightblue-theme {
  @include mat.all-component-themes($blue-lightblue-theme);
  @include custom-components-theme($blue-lightblue-theme);
  @include css-vars($blue-lightblue-theme);
}

.deeporange-indigo-theme {
  @include mat.all-component-themes($deeporange-indigo-theme);
  @include custom-components-theme($deeporange-indigo-theme);
  @include css-vars($deeporange-indigo-theme);
}

.close-dialog {
  float: right;
  margin-top: 15px;
  width: fit-content;
}

[hidden] {
  display: none !important;
}

.mat-expansion-panel-header {
  // If the panel, that the header is in, is inside an element being animated by Angular,
  // the default behavior is to block all child animations. This means that the header's
  // height won't kick in until the parent animation is done. We add a fallback to the
  // header's default height. If the animations aren't blocked, these styles will be overridden
  // by the inline styles from the animations module.
  .ng-animating .mat-expansion-panel & {
    min-height: 48px;
  }

  .ng-animating .mat-expansion-panel.mat-expanded & {
    min-height: 64px;
  }
}

.mat-expansion-panel-content {
  // If the expansion panel is inside an element being animated by Angular,
  // the default behavior is to block all child animations. This means that the
  // default `height: 0` won't kick in until the parent animation is over, which
  // will cause the panel to appear open, before it snaps into place. We don't want
  // to set the default height to zero, because it'll break the `height: '*'` from
  // the animation definitions. Instead we add a fallback that only applies only if
  // it's inside a parent that is mid-animation.
  .ng-animating .mat-expansion-panel:not(.mat-expanded) & {
    height: 0;
    overflow: hidden;
  }
}

#hacking-instructor code {
  background-color: $bg-hacking-instructor;
  border-radius: 1px;
  font-family: monospace;
  padding: 0 4px;
}

.CodeMirror {
  border-radius: 16px;
  height: 600px !important;
}
